<template #default="{ dishDatail }">
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      height="50px"
      width="100%"
    >
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img :src="item" class="swipe-img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 名称，标签，价格 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        :title="dishDatail.dishName"
        title-class="dish-name"
        :value="'￥ ' + dishDatail.price"
        value-class="price"
      >
      </van-cell>
      <van-cell>
        <!-- 标签 -->
        <van-tag
          class="label"
          size="medium"
          round
          type="success"
          v-for="(item, i) in dishDatail.labels"
          :key="i"
        >
          {{ item.labelName }}
        </van-tag>
      </van-cell>
      <!-- 材料 -->
      <van-list>
        <van-cell
          center
          icon="description-o"
          class="material-cell"
          v-for="item in dishDatail.materials"
          :key="item.id"
          :title="item.materialName"
          :value="item.weight * 500 + ' g'"
          :label="item.price + '元/500g'"
        />
      </van-list>
      <div class="practice">
        <div class="practice-title">--菜品简介--</div>
        <div class="practice-info">{{ dishDatail.introduce }}</div>
      </div>
      <div class="practice">
        <div class="practice-title">--推荐做法--</div>
        <div class="practice-info">{{ dishDatail.practice }}</div>
      </div>
    </van-list>
    <van-goods-action>
      <van-goods-action-button
        color="#82E87A"
        type="warning"
        text="收藏"
        @click="addCollection"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { dishGetDetailService } from "@/api/dishAPI";
import { cartPublishService } from "@/api/orderAPI";
import { Notify, Toast } from "vant";

export default {
  //通过props接收路由参数
  props: {
    did: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 菜品详情
      dishDatail: {
        id: "",
        dishName: "",
        price: 0.0,
        urls: [],
        introduce: "",
        materials: [],
        labels: [],
      },
      // 菜品图片单独处理
      imgList: [],
      // 是否正在加载下一页数据，如果 loading 为 true，则不会反复触发 load 事件
      // 每当下一页数据请求回来之后，千万要记得，把 loading 从 true 改为 false
      loading: false,
      // 所有数据是否加载完毕了，如果没有更多数据了，一定要把 finished 改成 true
      finished: true,
    };
  },
  created() {
    this.initDishDetail(this.did);
  },
  methods: {
    async initDishDetail(did) {
      // 需要基于 dish-id 发送请求，获取编辑对应的详情数据，进行回显
      const {
        data: { success = false, errorMsg = "", data: res, total = 0 },
      } = await dishGetDetailService(did);
      for (let key in res) {
        this.dishDatail[key] = res[key];
      }
      // 图片需要单独处理回显
      const images = this.dishDatail.urls;
      images.forEach((item) => {
        this.imgList.push(item);
      });
    },
    // 只要 onLoad 被调用，就应该请求下一页数据
    onLoad() {
      console.log("触发了 load 事件！");
    },
    async addCollection() {
      const res = await cartPublishService(this.did);
      Toast(res.data.data);
    },
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
}
.swipe-img {
  overflow: hidden;
  height: 100%;
  width: 100%;
  object-fit: fill;
}
// .title-box {
//   display: flex;
//   width: 100%;
//   padding: 10px;
//   flex-direction: column;
//   justify-content: space-between;
//   align-items: flex-start;
// }
.dish-name {
  font-size: 18px;
  color: #222226;
}
/deep/ .label {
  margin-right: 3px;
}
.price {
  font-size: 22px;
  color: #fe2c24;
  font-weight: 700;
}
.material-cell {
  border-bottom: 1px solid #ebedf0;
}
.practice {
  padding: 10px 20px;
  .practice-title {
    font-size: 16px;
    color: #222226a7;
    margin: 10px 0;
  }
  .practice-info {
    font-size: 14px;
    line-height: 20px;
    color: #22222679;
  }
}
</style>